<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Loaha CMS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="/app/laoha/sdk/sdk.css" />
    <link rel="stylesheet" href="/app/laoha/sdk/helper.css" />
    <link rel="stylesheet" href="/app/laoha/sdk/iconfont.css" />
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img {
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script src="/app/laoha/sdk/sdk.js"></script>
    <script type="text/javascript">
        // API相关常量
        const CREATE_API = "/app/laoha/admin/comment/store";
        const LIST_API = "/app/laoha/admin/comment/list";
        const EDIT_API = "/app/laoha/admin/comment/edit";
        const SHOW_API = "/app/laoha/admin/comment/show";
        const DELETE_API = "delete:/app/laoha/admin/comment/delete";
        const UPDATE_API = "put:/app/laoha/admin/comment/update";
        (function () {
            let amis = amisRequire('amis/embed');
            // 通过替换下面这个配置来生成不同页面
            let amisJSON = {
                "type": "page",
                "data": <?= json_encode($params, JSON_UNESCAPED_UNICODE) ?>,
                "title": "评论列表",
                "body": [
                    {
                        "type": "crud",
                        "syncLocation": false,
                        //"api": LIST_API,
                        "mode": "cards",
                        "columnsCount": 1,
                        "columnsTogglable": false,
                        //"footerToolbar": ["load-more"],
                        "headerToolbar": [
                            //新增
                            {
                                "label": "添加评论",
                                "type": "button",
                                "level": "primary",
                                "actionType": "dialog",
                                "align": "right",
                                "dialog": {
                                    "title": "添加新的评论",
                                    "size": "full",
                                    "body": {
                                        "type": "form",
                                        "mode": "normal",
                                        "api": "post:/app/laoha/admin/comment/store",
                                        "body": [
                                            {
                                                "type": "hidden",
                                                "name": "root",
                                                "value": "${root}",
                                            },
                                            {
                                                "type": "hidden",
                                                "name": "root_id",
                                                "value": "${id}"
                                            },
                                            {
                                                "type": "group",
                                                "direction": "vertical",
                                                "body": [
                                                    {
                                                        "type": "group",
                                                        "body": [
                                                            {
                                                                "name": "preview",
                                                                "type": "switch",
                                                                "option": "预览开关"
                                                            },
                                                            {
                                                                "type": "link",
                                                                "href": "https://markdown.com.cn/basic-syntax/",
                                                                "body": "查看 MarkDown 基本语法",
                                                                "blank": true
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "type": "editor",
                                                        "name": "content",
                                                        "language": "markdown",
                                                        "options": {
                                                            "lineNumbers": "off"
                                                        },
                                                        "desc": "支持基础markdown语法",
                                                        "required": true
                                                    },
                                                    {
                                                        "type": "markdown",
                                                        "visibleOn": "${preview}",
                                                        "name": "content",
                                                        "options": {
                                                            "linkify": true,
                                                            "breaks": true
                                                        }
                                                    },
                                                    {
                                                        "type": "divider",
                                                        "visibleOn": "${preview}",
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                }
                            }
                        ],
                        "card": {
                            "header": {
                                "title": "${user.nickname}",
                                "subTitle": "${created_at|fromNow}",
                                "avatar": "${user.avatar}",
                                "avatarClassName": "pull-left thumb-md avatar b-3x m-r w-12"
                            },
                            "bodyClassName": "ml-16",
                            //"headerClassName": "bg-light",
                            "body": [
                                {
                                    "name": "content",
                                    "type": "markdown",
                                    "options": {
                                        "linkify": true,
                                        "breaks": true
                                    }
                                },
                                {
                                    "label": "",
                                    "type": "each",
                                    "source": "${comments}",
                                    "visibleOn": "${comments|first}",
                                    "items": {
                                        "type": "card",
                                        "className": "w-full bg-light",
                                        "header": {
                                            "title": "${user.nickname}",
                                            "subTitle": "${created_at|fromNow}",
                                            "avatarClassName": "pull-left thumb-md avatar b-3x m-r w-12",
                                            "avatar": "${user.avatar}",
                                        },
                                        "bodyClassName": "ml-16",
                                        "body": [
                                            {
                                                "name": "content",
                                                "type": "markdown",
                                                "options": {
                                                    "linkify": true,
                                                    "breaks": true
                                                }
                                            }
                                        ],
                                        "toolbar": [
                                            {
                                                "type": "button",
                                                "label": "编辑",
                                                "actionType": "dialog",
                                                "icon": "fa fa-pencil",
                                                "dialog": {
                                                    "title": "编辑表单",
                                                    "size": "full",
                                                    "body": {
                                                        "type": "form",
                                                        "mode": "normal",
                                                        "api": UPDATE_API + "?id=${id}",
                                                        "body": [

                                                            {
                                                                "type": "group",
                                                                "body": [
                                                                    {
                                                                        "name": "preview",
                                                                        "type": "switch",
                                                                        "option": "预览开关"
                                                                    },
                                                                    {
                                                                        "type": "link",
                                                                        "href": "https://markdown.com.cn/basic-syntax/",
                                                                        "body": "查看 MarkDown 基本语法",
                                                                        "blank": true
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "type": "editor",
                                                                "name": "content",
                                                                "language": "markdown",
                                                                "options": {
                                                                    "lineNumbers": "off"
                                                                },
                                                                "desc": "支持基础markdown语法",
                                                                "required": true
                                                            },
                                                            {
                                                                "type": "markdown",
                                                                "visibleOn": "${preview}",
                                                                "name": "content",
                                                                "options": {
                                                                    "linkify": true,
                                                                    "breaks": true
                                                                }
                                                            }
                                                        ]
                                                    }
                                                }
                                            },
                                            //删除
                                            {
                                                "type": "button",
                                                "icon": "fa fa-trash",
                                                "label": "删除",
                                                "actionType": "ajax",
                                                "confirmText": "您确认要删除?",
                                                "api": DELETE_API + "?id=${id}",
                                            }
                                        ]
                                    }
                                },
                            ],
                            "actions": [
                                {
                                    "type": "button",
                                    "icon": "far fa-comment text-danger",
                                    "label": "回复",
                                    "actionType": "dialog",
                                    "dialog": {
                                        "title": "添加回复",
                                        "size": "xl",
                                        "body": {
                                            "type": "form",
                                            "mode": "normal",
                                            "api": CREATE_API,
                                            "canAccessSuperData": false,
                                            "body": [
                                                {
                                                    "type": "hidden",
                                                    "name": "root",
                                                    "value": "${root}"
                                                },
                                                {
                                                    "type": "hidden",
                                                    "name": "root_id",
                                                    "value": "${root_id}"
                                                },
                                                {
                                                    "type": "hidden",
                                                    "name": "parent_id",
                                                    "value": "${id}"
                                                },
                                                {
                                                    "type": "group",
                                                    "body": [
                                                        {
                                                            "name": "preview",
                                                            "type": "switch",
                                                            "option": "预览开关"
                                                        },
                                                        {
                                                            "type": "link",
                                                            "href": "https://markdown.com.cn/basic-syntax/",
                                                            "body": "查看 MarkDown 基本语法",
                                                            "blank": true
                                                        },
                                                    ]
                                                },
                                                {
                                                    "type": "editor",
                                                    "name": "content",
                                                    "language": "markdown",
                                                    "value": "",
                                                    "options": {
                                                        "lineNumbers": "off"
                                                    },
                                                    "desc": "支持基础markdown语法",
                                                    "required": true
                                                },
                                                {
                                                    "type": "markdown",
                                                    "visibleOn": "${preview}",
                                                    "name": "content",
                                                    "options": {
                                                        "linkify": true,
                                                        "breaks": true
                                                    }
                                                },
                                            ]
                                        }
                                    }
                                },
                                {
                                    "type": "button",
                                    "icon": "fa fa-pencil",
                                    "label": "编辑",
                                    "actionType": "dialog",
                                    "title": "编辑",
                                    "dialog": {
                                        "title": "编辑表单",
                                        "size": "full",
                                        "body": {
                                            "type": "form",
                                            "mode": "normal",
                                            "api": UPDATE_API + "?id=${id}",
                                            "body": [
                                                {
                                                    "type": "group",
                                                    "body": [
                                                        {
                                                            "name": "preview",
                                                            "type": "switch",
                                                            "option": "预览开关"
                                                        },
                                                        {
                                                            "type": "link",
                                                            "href": "https://markdown.com.cn/basic-syntax/",
                                                            "body": "查看 MarkDown 基本语法",
                                                            "blank": true
                                                        },
                                                    ]
                                                },
                                                {
                                                    "type": "editor",
                                                    "name": "content",
                                                    "language": "markdown",
                                                    "options": {
                                                        "lineNumbers": "off"
                                                    },
                                                    "desc": "支持基础markdown语法",
                                                    "required": true
                                                },
                                                {
                                                    "type": "markdown",
                                                    "visibleOn": "${preview}",
                                                    "name": "content",
                                                    "options": {
                                                        "linkify": true,
                                                        "breaks": true
                                                    }
                                                },
                                            ]
                                        }
                                    }
                                },
                                //删除
                                {
                                    "type": "button",
                                    "icon": "fa fa-times text-danger",
                                    "label": "删除",
                                    "actionType": "ajax",
                                    "confirmText": "您确认要删除?",
                                    "api": DELETE_API + "?id=${id}"
                                }
                            ],
                        }
                    }
                ]
            };
            let amisScoped = amis.embed('#root', amisJSON, {}, { toastPosition: 'center' });
        })();
    </script>
</body>

</html>